<!DOCTYPE html>
<html>
<head>
    <title>03_DOM编程</title>

    <meta charset="UTF-8"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>

    <meta name="HandheldFriendly" content="true"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link href="./asset/gitbook/style.css" type="text/css" rel="stylesheet"/>
    <link href="./asset/gitbook/istyle.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        
            span.md_line{margin-bottom:0.5em; display:block; line-height:1.89}
            .md_line br{ display: none;}
            
    </style>

    <script>
        var flowchat_options = {
            'x': 0, 'y': 0, 'line-width': 1, 'line-length': 50, 'text-margin': 10, 'font-size': 13,
            'font-color': '#3c3c3c', 'line-color': '#666666', 'element-color': '#666666', 'fill': 'transparent',
            'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'class': 'flowchart', 'scale': 1,
            'symbols': { 'start': {}, 'end': {}, 'condition': {}, 'inputoutput': {}, 'operation': {}, 'subroutine': {}}
        }
    </script>
    <script type="text/javascript" src="./asset/other/raphael-min.js"></script>
    <script type="text/javascript" src="./asset/other/flowchart.js"></script>
    <script type="text/javascript" src="./asset/other/echarts.min.js"></script>


</head>

<body>





<div data-basepath="/service/gitbook" class="book">
    <div class="book-summary">
        <ul class="summary">
            <li>
                <a href="./index.html">笔记</a>
            </li>
            <li class="divider"></li>
            
                
                
    
    <li data-level="1" class="chapter" data-path="01_JavaScript基本语法.html">
        
        
        <a href="./01_JavaScript基本语法.html" ><b>1</b> 第一章:JavaScript基本语法</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="2" class="chapter" data-path="02_函数与window对象.html">
        
        
        <a href="./02_函数与window对象.html" ><b>2</b> 第二章_函数与window对象</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="3" class="chapter active" data-path="03_DOM编程.html">
        
        
        <a href="./03_DOM编程.html" ><b>3</b> 03_DOM编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="4" class="chapter" data-path="04_DOM高级编程.html">
        
        
        <a href="./04_DOM高级编程.html" ><b>4</b> 04_DOM高级编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="5" class="chapter" data-path="05_控制CSS样式.html">
        
        
        <a href="./05_控制CSS样式.html" ><b>5</b> 05_控制CSS样式</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="6" class="chapter" data-path="06_表单验证及操作基础.html">
        
        
        <a href="./06_表单验证及操作基础.html" ><b>6</b> 06_表单验证及操作基础</a>
        
            
                    
                
        
    </li>

            
        </ul>

    </div>

    <div class="book-body">
        <div class="body-inner">

            <div class="book-header" role="navigation">
                <h1>
                    <a href="./index.html" > 笔记</a>
                </h1>
            </div>

            <div tabindex="-1" class="page-wrapper">
                <div class="page-inner">
                    <h2 class="post_title"> 03_DOM编程 </h2>
                    <div class="post_body"> <p class="md_block">

<div class="toc"><ul>
<li>
<a href="#toc_0">03_DOM编程</a>
<ul>
<li>
<a href="#toc_1">节点类型</a>
</li>
<li>
<a href="#toc_2">查找元素</a>
</li>
<li>
<a href="#toc_3">document对象元素选择练习</a>
</li>
<li>
<a href="#toc_4">操作HTML元素</a>
</li>
<li>
<a href="#toc_5">作业</a>
<ul>
<li>
<a href="#toc_6">作业1:tab切换效果</a>
</li>
<li>
<a href="#toc_7">作业2:下拉菜单</a>
</li>
<li>
<a href="#toc_8">作业3:全选复选筐</a>
</li>
<li>
<a href="#toc_9">作业4:轮播图片</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</p>


<h2 id="toc_1">节点类型</h2>

<p class="md_block">
    <span class="md_line">元素节点  p   li   div<br /></span>
    <span class="md_line">文本节点<br><br /></span>
    <span class="md_line">属性节点 id   class</span>
</p>


<h2 id="toc_2">查找元素</h2>
<table>
 <thead><tr><th style="text-align:left">方法</th>
<th style="text-align:left">说明</th>
 </tr>
</thead>
 <tbody><tr><td style="text-align:left">getElementById </td>
<td style="text-align:left"> 获取特定ID元素的节点(单个元素对象)</td>
</tr>
<tr><td style="text-align:left">getElementsByName </td>
<td style="text-align:left"> 通过name属性选择节点(数组)</td>
</tr>
<tr><td style="text-align:left">getElementsByTagName </td>
<td style="text-align:left"> 通过标签名选择节点(数组)</td>
</tr>
</tbody> 
</table>
<!--block_code_end-->
<p class="md_block">
    <span class="md_line">附加三个不是W3C 标准文档内的,四大主流浏览器都支持<br /></span>
    <span class="md_line">getElementsByClassName --&gt;通过class属性值选择元素(数组)<br /></span>
    <span class="md_line">document.querySelector(&quot;#test&quot;);--&gt;通过选择CSS一样传参选择单个元素(元素对象)(如果有多个元素,它只返回第一个)<br /></span>
    <span class="md_line">document.querySelectorAll(&quot;#test&quot;)[0];--&gt;通过选择CSS一样传参选择元素(元素的数组)</span>
</p>


<h2 id="toc_3">document对象元素选择练习</h2>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="cm">/*练习要求:用手册中有的与刚讲的二个新的.</span>
<span class="cm">            1.选择好第一个p标签,弹出里面的文本值</span>
<span class="cm">            2.选择第二与第三个p标签,弹出里面的文本值(用循环弹出)</span>
<span class="cm">            3.选择三个p标签,弹出里面的文本值(用循环弹出)</span>
<span class="cm">            */</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
                <span class="cm">/*</span>
<span class="cm">                //1.选择好第一个p标签,弹出里面的文本值</span>
<span class="cm">                //方法1</span>
<span class="cm">                var p1 = document.getElementById(&#39;p1&#39;);</span>
<span class="cm">                alert(p1.innerHTML);</span>
<span class="cm">                //方法2</span>
<span class="cm">                var p11 = document.querySelector(&#39;#p1&#39;);</span>
<span class="cm">                alert(p11.innerHTML);</span>
<span class="cm">                </span>
<span class="cm">                */</span>
                <span class="cm">/*</span>
<span class="cm">                //选择第二与第三个p标签,弹出里面的文本值(用循环弹出)</span>
<span class="cm">                var p23 = document.getElementsByClassName(&#39;c1&#39;);</span>
<span class="cm">                for(var i = 0 ; i&lt;p23.length ; i++){</span>
<span class="cm">                    alert(p23[i].innerHTML);</span>
<span class="cm">                }</span>
<span class="cm">                //方法二</span>
<span class="cm">                var p23 = document.querySelectorAll(&#39;.c1&#39;);</span>
<span class="cm">                for(var i = 0 ; i&lt;p23.length ; i++){</span>
<span class="cm">                    alert(p23[i].innerHTML);</span>
<span class="cm">                }</span>
<span class="cm">                */</span>
                
                <span class="c1">//3.选择三个p标签,弹出里面的文本值(用循环弹出)</span>
                <span class="c1">//方法1</span>
                <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">);</span>
                <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
                    <span class="nx">alert</span><span class="p">(</span><span class="nx">p</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">);</span>
                <span class="p">}</span>
                <span class="c1">//方法2</span>
                <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">);</span>
                <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
                    <span class="nx">alert</span><span class="p">(</span><span class="nx">p</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;p1&quot;</span><span class="p">&gt;</span>第一个p<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;c1&quot;</span><span class="p">&gt;</span>第二个p<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#39;c1&#39;</span><span class="p">&gt;</span>第三个p<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_4">操作HTML元素</h2>
<div class="codehilite code_lang_javascript  highlight"><pre><span></span>                <span class="c1">//alert(p1.nodeName);//元素标签名</span>
                <span class="c1">//alert(p1.innerHTML);//它获取标签中的所有内容</span>
                <span class="c1">//alert(p1.innerText);//它只获取文本内容</span>
                <span class="c1">//alert(p1.getAttribute(&#39;class&#39;));//获取某个属性值</span>
                <span class="c1">//p1.setAttribute(&#39;class&#39;,&#39;pppppppp&#39;);//设置元素的属性</span>
                <span class="c1">//p1.style.backgroundColor = &#39;red&#39;;//设置元素的样式</span>
                <span class="nx">p1</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">cssText</span> <span class="o">=</span> <span class="s2">&quot;background-color: red;border: 1px solid green;&quot;</span><span class="p">;</span>
                <span class="c1">//p1.removeAttribute(&#39;id&#39;);//移除一个属性</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_5">作业</h2>

<h3 id="toc_6">作业1:tab切换效果</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>TAB效果<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;css/index03.css&quot;</span><span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;js/index03.js&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;tab&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;first&quot;</span> <span class="na">onmouseover</span><span class="o">=</span><span class="s">&quot;tabEve(0)&quot;</span><span class="p">&gt;</span>头条<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span> <span class="na">onmouseover</span><span class="o">=</span><span class="s">&quot;tabEve(1)&quot;</span><span class="p">&gt;</span>社会<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span> <span class="na">onmouseover</span><span class="o">=</span><span class="s">&quot;tabEve(2)&quot;</span><span class="p">&gt;</span>娱乐<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span> <span class="na">onmouseover</span><span class="o">=</span><span class="s">&quot;tabEve(3)&quot;</span><span class="p">&gt;</span>军事<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;uls&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>这两国家竟在南海冲突冲突冲突冲突冲突冲突<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>母亲街头脚踩女儿!真...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>两男子因这个行为遭围...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>揭黑作坊粽子：馅里爬...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>餐馆“脚洗菜”顾客看到...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>他送交警特殊锦旗 被拘...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>她整形失败欲自杀:胸不...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>下水管传婴儿哭声 打开...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;uls hidden&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>山西煤矿透水:5人获救6人...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>村民住8层千万豪宅 设宴250...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>他拍天安门38年 照片没有...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>女子醉酒被侵犯后遭丢弃...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>儿子被撞飞 老爸坐车扬长...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>老人装嫩妹约网友 失身后...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>邻居娃满脸血敲门 她帮完...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index01.html&quot;</span><span class="p">&gt;</span>惊呆 女大学生探访人类精...<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;uls hidden&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>娱乐块<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;uls hidden&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>军事块<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        网站的其他内容.......

    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">css文件</span>
</p>

<div class="codehilite code_lang_css  highlight"><pre><span></span><span class="k">@charset</span> <span class="s2">&quot;utf-8&quot;</span><span class="p">;</span>
<span class="o">*</span><span class="p">{</span>
    <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="nb">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#tab</span><span class="p">{</span>
    <span class="nb">list-style</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span><span class="c">/*去掉li自带的小圆点*/</span>
    <span class="nb">width</span><span class="o">:</span> <span class="m">208px</span><span class="p">;</span><span class="c">/*宽度*/</span>
    <span class="nb">height</span><span class="o">:</span> <span class="m">22px</span><span class="p">;</span><span class="c">/*高度*/</span>
<span class="p">}</span>
<span class="nn">#tab</span><span class="o">&gt;</span><span class="nt">li</span><span class="p">{</span>
    <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#999</span><span class="p">;</span><span class="c">/*设定边框*/</span>
    <span class="nb">width</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span><span class="c">/*宽度*/</span>
    <span class="nb">height</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
    <span class="nb">float</span><span class="o">:</span> <span class="nb">left</span><span class="p">;</span><span class="c">/*浮动*/</span>
    <span class="nb">text-align</span><span class="o">:</span> <span class="nb">center</span><span class="p">;</span><span class="c">/*里面的文字居中*/</span>
    <span class="nb">border-top</span><span class="o">-</span><span class="nb">left</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span><span class="c">/*左上角设置圆角边框*/</span>
    <span class="nb">border-top</span><span class="o">-</span><span class="nb">right</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span><span class="c">/*右上角设置圆角边框*/</span>
<span class="p">}</span>
<span class="nc">.uls</span><span class="p">{</span>
    <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#999</span><span class="p">;</span>
    <span class="nb">width</span><span class="o">:</span> <span class="m">206px</span><span class="p">;</span>
    <span class="nb">height</span><span class="o">:</span> <span class="m">200px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.first</span><span class="p">{</span>
    <span class="nb">background-color</span><span class="o">:</span> <span class="m">#ddd</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.hidden</span><span class="p">{</span>
    <span class="nb">display</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/*---------新加样式----------*/</span>
<span class="nc">.uls</span><span class="o">&gt;</span><span class="nt">li</span><span class="p">{</span>
    <span class="nb">margin-top</span><span class="o">:</span> <span class="m">2px</span><span class="p">;</span>
    <span class="nb">white-space</span><span class="o">:</span> <span class="nb">nowrap</span><span class="p">;</span><span class="c">/*强制不换行*/</span>
    <span class="nb">overflow</span><span class="o">:</span> <span class="nb">hidden</span><span class="p">;</span><span class="c">/*超出部分隐藏*/</span>
    <span class="nb">text</span><span class="o">-</span><span class="nb">overflow</span><span class="o">:</span> <span class="n">ellipsis</span><span class="p">;</span><span class="c">/*文本长度超出以...显示*/</span>
<span class="p">}</span>
<span class="nt">a</span><span class="nd">:link</span><span class="p">{</span>
    <span class="nb">text-decoration</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="nb">color</span><span class="o">:</span> <span class="m">#000</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span><span class="nd">:hover</span><span class="p">{</span>
    <span class="nb">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">javascript</span>
</p>

<div class="codehilite code_lang_javascript  highlight"><pre><span></span><span class="kd">var</span> <span class="nx">tab</span><span class="p">;</span><span class="c1">//表示选中的元素对象集合</span>
<span class="kd">var</span> <span class="nx">uls</span><span class="p">;</span><span class="c1">//获取下面的UL标签对象集合</span>

<span class="c1">//等网页加载完成后执行.</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
    <span class="c1">//获取ID为&#39;tab&#39;元素下的所有&#39;li&#39;标签(数组)</span>
    <span class="nx">tab</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;tab&#39;</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">);</span>
    <span class="c1">//获取class属性值为&#39;uls&#39;的元素列表</span>
    <span class="nx">uls</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;uls&#39;</span><span class="p">);</span>
    <span class="c1">//document.querySelector(&#39;#tab&#39;)</span>
    
<span class="p">}</span>
<span class="c1">//头部TAB的鼠标事件,带一个整数的参数</span>
<span class="kd">function</span> <span class="nx">tabEve</span><span class="p">(</span><span class="nx">i</span><span class="p">){</span>
    <span class="c1">//循环头部TAB效果的li标签.当事件传进来的i==循环的是一个时,则为鼠标移上去的.</span>
    <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">j</span> <span class="o">&lt;</span> <span class="nx">tab</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">){</span>
        <span class="c1">//alert(tab[i].innerHTML);</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">i</span> <span class="o">==</span> <span class="nx">j</span><span class="p">){</span>
            <span class="nx">tab</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="s1">&#39;#ddd&#39;</span><span class="p">;</span>
            <span class="nx">uls</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;block&#39;</span><span class="p">;</span>
        <span class="p">}</span><span class="k">else</span><span class="p">{</span>
            <span class="nx">tab</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="s1">&#39;#fff&#39;</span><span class="p">;</span>
            <span class="nx">uls</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_7">作业2:下拉菜单</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>下拉菜单<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
            <span class="nc">.no_circle</span><span class="p">{</span>
                <span class="nb">list-style-type</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span>
                <span class="nb">display</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nt">a</span><span class="p">{</span>
                <span class="nb">font-size</span><span class="o">:</span> <span class="m">12px</span><span class="p">;</span>
                <span class="nb">color</span><span class="o">:</span> <span class="nb">black</span><span class="p">;</span>
                <span class="nb">text-decoration</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nt">a</span><span class="nd">:hover</span><span class="p">{</span>
                <span class="nb">font-size</span><span class="o">:</span> <span class="m">13px</span><span class="p">;</span>
                <span class="nb">color</span><span class="o">:</span> <span class="m">#ff0000</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nt">img</span><span class="p">{</span>
                <span class="nb">vertical-align</span><span class="o">:</span> <span class="nb">middle</span><span class="p">;</span>
                <span class="nb">border</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;js/index6.js&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/fold.gif&quot;</span><span class="p">/&gt;</span>树形菜单<span class="p">&lt;/</span><span class="nt">strong</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;top&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/fclose.gif&quot;</span> <span class="p">/&gt;</span>文学艺术<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;art&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;no_circle&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>先锋写作<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>小说散文<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>诗风词韵<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">a</span>  <span class="na">class</span><span class="o">=</span><span class="s">&quot;top&quot;</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/fclose.gif&quot;</span> <span class="p">/&gt;</span>贴图专区<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;photo&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;no_circle&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>真我风采<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>视频贴图<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>形形色色<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">a</span>  <span class="na">class</span><span class="o">=</span><span class="s">&quot;top&quot;</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/fclose.gif&quot;</span> <span class="p">/&gt;</span>灌水专区<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;no_circle&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>真我风采<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>视频贴图<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>形形色色<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
                <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">a</span>  <span class="na">class</span><span class="o">=</span><span class="s">&quot;top&quot;</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/fclose.gif&quot;</span> <span class="p">/&gt;</span>灌水专区<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;no_circle&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>真我风采<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>视频贴图<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>形形色色<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
                <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">a</span>  <span class="na">class</span><span class="o">=</span><span class="s">&quot;top&quot;</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/fclose.gif&quot;</span> <span class="p">/&gt;</span>灌水专区<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;no_circle&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>真我风采<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>视频贴图<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>形形色色<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
                <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">a</span>  <span class="na">class</span><span class="o">=</span><span class="s">&quot;top&quot;</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/fclose.gif&quot;</span> <span class="p">/&gt;</span>灌水专区<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;no_circle&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>真我风采<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>视频贴图<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">img</span><span class="err">/</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/doc.gif&quot;</span><span class="p">&gt;</span>形形色色<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end--><div class="codehilite code_lang_javascript  highlight"><pre><span></span><span class="c1">//全局区域</span>
<span class="kd">var</span> <span class="nx">topObjs</span><span class="p">;</span><span class="c1">//可以点击的外面主菜单(数组)</span>
<span class="kd">var</span> <span class="nx">inObjs</span><span class="p">;</span><span class="c1">//每个主菜单下面的子菜单(数组)</span>

<span class="c1">//onload事件(网页加载完执行)</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
    <span class="nx">topObjs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;top&#39;</span><span class="p">);</span><span class="c1">//数组</span>
    <span class="nx">inObjs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;no_circle&#39;</span><span class="p">);</span><span class="c1">//数组</span>
    <span class="c1">//给每个主菜单注册点击事件(用a标签的href属性完成)</span>
    <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">topObjs</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
        <span class="nx">topObjs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s2">&quot;href&quot;</span><span class="p">,</span><span class="s2">&quot;javascript:topClick(&quot;</span><span class="o">+</span><span class="nx">i</span><span class="o">+</span><span class="s2">&quot;)&quot;</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>
<span class="c1">//主菜单的点击事件</span>
<span class="kd">function</span> <span class="nx">topClick</span><span class="p">(</span><span class="nx">index</span><span class="p">){</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">inObjs</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">==</span> <span class="s1">&#39;block&#39;</span><span class="p">){</span>
        <span class="nx">inObjs</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="nx">inObjs</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">&#39;block&#39;</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_8">作业3:全选复选筐</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>全选<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;js/index7.js&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;myCheck&quot;</span><span class="p">/&gt;</span>全选<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">hr</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;love&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;play&quot;</span><span class="p">/&gt;</span>体育<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;love&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;game&quot;</span><span class="p">/&gt;</span>游戏<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;love&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;book&quot;</span><span class="p">/&gt;</span>看书<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;love&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;sleep&quot;</span><span class="p">/&gt;</span>睡觉<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end--><div class="codehilite code_lang_javascript  highlight"><pre><span></span><span class="c1">//全局</span>
<span class="kd">var</span> <span class="nx">selectAll</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">selectLoves</span><span class="p">;</span>

<span class="c1">//onload</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
    <span class="nx">selectAll</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByName</span><span class="p">(</span><span class="s1">&#39;myCheck&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
    <span class="nx">selectLoves</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByName</span><span class="p">(</span><span class="s1">&#39;love&#39;</span><span class="p">);</span><span class="c1">//数组</span>
    
    <span class="c1">//全选注册事件</span>
    <span class="nx">selectAll</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">check</span><span class="p">();</span>
    <span class="p">};</span>
    <span class="c1">//爱好复选框事件</span>
    <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span> <span class="nx">selectLoves</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
        <span class="nx">selectLoves</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
            <span class="nx">leveCheck</span><span class="p">();</span>
        <span class="p">}</span>
    <span class="p">};</span>
<span class="p">}</span>
<span class="c1">//爱好复选框事件</span>
<span class="kd">function</span> <span class="nx">leveCheck</span><span class="p">(){</span>
    <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span> <span class="nx">selectLoves</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">selectLoves</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">checked</span> <span class="o">==</span> <span class="kc">false</span><span class="p">){</span>
            <span class="nx">selectAll</span><span class="p">.</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
            <span class="k">return</span><span class="p">;</span><span class="c1">//退出整个函数</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="nx">selectAll</span><span class="p">.</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">//全选框事件</span>
<span class="kd">function</span> <span class="nx">check</span><span class="p">(){</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">selectAll</span><span class="p">.</span><span class="nx">checked</span> <span class="o">==</span> <span class="kc">true</span><span class="p">){</span>
        <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">selectLoves</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
            <span class="nx">selectLoves</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">selectLoves</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
            <span class="nx">selectLoves</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_9">作业4:轮播图片</h3>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;css/index09.css&quot;</span><span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;js/index09.js&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        
        
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div1&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;ul1&quot;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;top&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/001.jpg&quot;</span><span class="p">/&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;bottom&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/002.jpg&quot;</span><span class="p">/&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;bottom&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/003.jpg&quot;</span><span class="p">/&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;ul2&quot;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;top&quot;</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;bottom&quot;</span><span class="p">&gt;</span>2<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;bottom&quot;</span><span class="p">&gt;</span>3<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end--><div class="codehilite code_lang_css  highlight"><pre><span></span><span class="k">@charset</span> <span class="s2">&quot;utf-8&quot;</span><span class="p">;</span>

<span class="nn">#div1</span><span class="p">{</span>
    <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#999</span><span class="p">;</span>
    <span class="nb">height</span><span class="o">:</span><span class="m">280px</span><span class="p">;</span>
    <span class="nb">width</span><span class="o">:</span> <span class="m">520px</span><span class="p">;</span>
    <span class="nb">position</span><span class="o">:</span> <span class="nb">relative</span><span class="p">;</span><span class="c">/*相对定位*/</span>
<span class="p">}</span>
<span class="nt">ul</span><span class="p">{</span>
    <span class="nb">list-style</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="nb">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#ul1</span><span class="p">{</span>
    <span class="nb">height</span><span class="o">:</span><span class="m">280px</span><span class="p">;</span>
    <span class="nb">width</span><span class="o">:</span> <span class="m">520px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#ul1</span> <span class="nc">.top</span><span class="p">{</span>
    <span class="nb">display</span><span class="o">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#ul1</span> <span class="nc">.bottom</span><span class="p">{</span>
    <span class="nb">display</span><span class="o">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#ul2</span><span class="p">{</span>
    <span class="nb">width</span><span class="o">:</span> <span class="m">70px</span><span class="p">;</span>
    <span class="nb">height</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
    <span class="c">/*border: 1px solid red;*/</span>
    <span class="nb">position</span><span class="o">:</span> <span class="nb">absolute</span><span class="p">;</span>
    <span class="nb">bottom</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
    <span class="nb">left</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#ul2</span><span class="o">&gt;</span><span class="nt">li</span><span class="p">{</span>
    <span class="nb">border</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#999</span><span class="p">;</span>
    <span class="nb">width</span><span class="o">:</span> <span class="m">18px</span><span class="p">;</span>
    <span class="nb">height</span><span class="o">:</span> <span class="m">18px</span><span class="p">;</span>
    <span class="nb">text-align</span><span class="o">:</span> <span class="nb">center</span><span class="p">;</span>
    <span class="nb">float</span><span class="o">:</span> <span class="nb">left</span><span class="p">;</span>
    <span class="nb">margin-left</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
    <span class="nb">cursor</span><span class="o">:</span> <span class="nb">pointer</span><span class="p">;</span>
<span class="p">}</span>

<span class="nn">#ul2</span> <span class="nc">.top</span><span class="p">{</span>
    <span class="nb">background-color</span><span class="o">:</span> <span class="m">#080</span><span class="p">;</span>
    <span class="nb">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">8</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">#ul2</span> <span class="nc">.bottom</span><span class="p">{</span>
    <span class="nb">background-color</span><span class="o">:</span> <span class="m">#999</span><span class="p">;</span>
    <span class="nb">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">3</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end--><div class="codehilite code_lang_javascript  highlight"><pre><span></span><span class="c1">//全局变量</span>
<span class="kd">var</span> <span class="nx">imgs</span><span class="p">;</span><span class="c1">//图片数组</span>
<span class="kd">var</span> <span class="nx">tabs</span><span class="p">;</span><span class="c1">//图片上数字显示的数组</span>

<span class="kd">var</span> <span class="nx">myTime</span><span class="p">;</span><span class="c1">//定时器</span>
<span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><span class="c1">//当前正在显示的第N张图片</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
    <span class="nx">imgs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;ul1&#39;</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">);</span>
    <span class="nx">tabs</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;ul2&#39;</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">);</span>
    <span class="nx">myTime</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="s1">&#39;show()&#39;</span><span class="p">,</span><span class="mi">2000</span><span class="p">);</span><span class="c1">//启用定时器</span>
    
    <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">tabs</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
        <span class="c1">//鼠标移上来事件</span>
        <span class="nx">tabs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;onmouseover&#39;</span><span class="p">,</span><span class="s1">&#39;show1(&#39;</span><span class="o">+</span> <span class="nx">i</span> <span class="o">+</span><span class="s1">&#39;)&#39;</span><span class="p">);</span>
        <span class="c1">//鼠标移开启动定时器</span>
        <span class="nx">tabs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">onmouseout</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
            <span class="nx">myTime</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="s1">&#39;show()&#39;</span><span class="p">,</span><span class="mi">2000</span><span class="p">);</span><span class="c1">//启用定时器</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="c1">//鼠标移上去功能函数</span>
<span class="kd">function</span> <span class="nx">show1</span><span class="p">(</span><span class="nx">ii</span><span class="p">){</span>
    <span class="nx">index</span> <span class="o">=</span> <span class="nx">ii</span><span class="p">;</span><span class="c1">//改变一下正在显示的第N张图片</span>
    <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">myTime</span><span class="p">);</span>
    <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">imgs</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">i</span> <span class="o">==</span> <span class="nx">ii</span><span class="p">){</span>
            <span class="nx">imgs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span><span class="s1">&#39;top&#39;</span><span class="p">);</span><span class="c1">//显示</span>
            <span class="nx">tabs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span><span class="s1">&#39;top&#39;</span><span class="p">);</span><span class="c1">//显示</span>
        <span class="p">}</span><span class="k">else</span><span class="p">{</span>
            <span class="nx">imgs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span><span class="s1">&#39;bottom&#39;</span><span class="p">);</span><span class="c1">//显示</span>
            <span class="nx">tabs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span><span class="s1">&#39;bottom&#39;</span><span class="p">);</span><span class="c1">//显示</span>
        <span class="p">}</span>
    <span class="p">}</span>
    
    
<span class="p">}</span>



<span class="c1">//定时器函数</span>
<span class="kd">function</span> <span class="nx">show</span><span class="p">(){</span>
    <span class="nx">index</span><span class="o">++</span><span class="p">;</span><span class="c1">//1</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">index</span> <span class="o">==</span> <span class="nx">imgs</span><span class="p">.</span><span class="nx">length</span><span class="p">){</span>
        <span class="nx">index</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">imgs</span><span class="p">.</span><span class="nx">length</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">i</span> <span class="o">==</span> <span class="nx">index</span><span class="p">){</span>
            <span class="nx">imgs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span><span class="s1">&#39;top&#39;</span><span class="p">);</span><span class="c1">//显示</span>
            <span class="nx">tabs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span><span class="s1">&#39;top&#39;</span><span class="p">);</span><span class="c1">//显示</span>
        <span class="p">}</span><span class="k">else</span><span class="p">{</span>
            <span class="nx">imgs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span><span class="s1">&#39;bottom&#39;</span><span class="p">);</span><span class="c1">//显示</span>
            <span class="nx">tabs</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;class&#39;</span><span class="p">,</span><span class="s1">&#39;bottom&#39;</span><span class="p">);</span><span class="c1">//显示</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end--> </div>
                </div>
            </div>

        </div>

    </div>

</div>


<script type="text/javascript" src="./asset/gitbook/app.js"></script>

<script>require(["gitbook"], function (gitbook) {
    var config = {"fontSettings": {"theme": null, "family": "sans", "size": 2}};
    gitbook.start(config);
});

</script>





</body>

</html>